<template>
  <div>
    <el-divider>客户信息</el-divider>
    <el-form-item style="margin-left: 0">
      <el-row type="flex" :gutter="20" align="middle">
        <el-col :span="6">
          <el-form-item label="委托方全称" prop="clientName">
            <el-input v-model="reportCommonObj.clientName" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="委托方联系人姓名" label-width="135px" prop="clientContact">
            <el-input v-model="reportCommonObj.clientContact" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="委托方联系人职务" label-width="135px" prop="clientPost">
            <el-input v-model="reportCommonObj.clientPost" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="委托方联系人电话" label-width="135px" prop="clientPhone">
            <el-input v-model="reportCommonObj.clientPhone" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="20" align="middle">
        <el-col :span="6">
          <el-form-item label="业务来源" prop="clientBusiness">
            <el-select v-model="reportCommonObj.clientBusiness" style="width: 100%" clearable filterable @change="selectClient" @clear="resetClient">
              <el-option v-for="item in clientList" :key="item.id" :label="item.businessName" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="客户名称" prop="clientChannel">
            <el-select v-model="reportCommonObj.clientChannel" style="width: 100%" clearable filterable @change="selectChannel" @clear="resetChannel">
              <el-option v-for="item in channelList" :key="item.id" :label="item.channelName" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="子级名称" prop="clientBranch">
            <el-select v-model="reportCommonObj.clientBranch" style="width: 100%" clearable filterable @change="selectBranch" @clear="resetBranch">
              <el-option v-for="item in branchList" :key="item.id" :label="item.branchName" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="20" align="middle">
        <el-col :span="6">
          <el-form-item label="客户联系人姓名" label-width="130px" prop="clientUserName">
            <el-select v-model="reportCommonObj.clientUserName" filterable clearable allow-create placeholder="请选择检索内容" style="width: 100%" @change="selectRelation">
              <el-option
                v-for="item in relationList"
                :key="item.relation"
                :label="item.relation"
                :value="item.relation"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="客户联系人职务" label-width="130px">
            <el-input v-model="reportCommonObj.clientUserJob" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="客户联系人电话" label-width="130px" prop="clientUserPhone">
            <el-select v-model="reportCommonObj.clientUserPhone" placeholder="请选择检索内容" filterable clearable allow-create style="width: 100%">
              <el-option
                v-for="item in relationList"
                :key="item.phone"
                :label="item.phone"
                :value="item.phone"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="20" align="middle">
        <el-col :span="6">
          <el-form-item label="被评估单位名称" label-width="110px">
            <el-input v-model="reportCommonObj.clientUnitName" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="被评估单位出资类型" label-width="140px" prop="clientContributiveType">
            <el-select v-model="reportCommonObj.clientContributiveType" style="width: 100%" clearable filterable>
              <el-option v-for="item in contributive" :key="item.id" :label="item.contributiveName" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="被评估单位经济性质" label-width="140px" prop="clientEconomicNature">
            <el-select v-model="reportCommonObj.clientEconomicNature" style="width: 100%" clearable filterable>
              <el-option v-for="item in economicNature" :key="item.id" :label="item.economicsName" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="被评估单位行业类型" label-width="140px" prop="clientIndustryType">
            <el-select v-model="reportCommonObj.clientIndustryType" style="width: 100%" clearable filterable>
              <el-option v-for="item in industryType" :key="item.id" :label="item.industryName" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="20" align="middle">
        <el-col :span="6">
          <el-form-item label="被评估单位统一信用代码" label-width="170px">
            <el-input v-model="reportCommonObj.clientCreditCode" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="被评估单位注册资本" label-width="140px">
            <el-input v-model="reportCommonObj.clientRegisteredCapital" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="20" align="middle">
        <el-col :span="6">
          <el-form-item label="资产客户类型" prop="clientType">
            <el-select v-model="reportCommonObj.clientType" style="width: 100%" clearable filterable>
              <el-option v-for="item in clientType" :key="item.id" :value="item.id" :label="item.clientName" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="业务所在地" label-width="100px">
            <el-input v-model="reportCommonObj.clientLocation" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form-item>
  </div>
</template>

<script>
import { clientBranchNoPage, clientBusinessNoPage, clientChannelNoPage, clientRelationNoPage } from '@/api/client'
import { getSearchFormList } from '@/api/property-report'

export default {
  name: 'ClientInfo',
  props: {
    reportCommonObj: {
      clientChannel: null,
      clientBusiness: null,
      clientBranch: null,
      type: Object,
      required: true
    },
    isAudit: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  data() {
    return {
      channelList: [],
      clientList: [],
      branchList: [],
      relationList: [],
      relationListFinal: [],
      channelListFinal: [],
      clientListFinal: [],
      branchListFinal: [],
      continue: [],
      clientType: [],
      contributive: [],
      economicNature: [],
      industryType: [],
      fileTime: ''
    }
  },

  created() {
    this.init()
  },

  methods: {
    init() {
      this.getChannelList()
      this.getClientsList()
      this.getBranchList()
      this.getRelationList()
      this.getSearchForm()
    },

    getSearchForm() {
      getSearchFormList().then(res => {
        this.clientType = res.data.clientType
        this.contributive = res.data.contributive
        this.economicNature = res.data.economicNature
        this.industryType = res.data.industryType
      })
    },

    getRelationList() {
      clientRelationNoPage().then(res => {
        this.relationList = res.data.list
        this.relationListFinal = res.data.list
      })
    },

    getChannelList() {
      clientChannelNoPage().then(res => {
        this.channelList = res.data.list
        this.channelListFinal = res.data.list
      })
    },
    getClientsList() {
      clientBusinessNoPage().then(res => {
        this.clientList = res.data.list
        this.clientListFinal = res.data.list
      })
    },
    getBranchList() {
      clientBranchNoPage().then(res => {
        this.branchList = res.data.list
        this.branchListFinal = res.data.list
      })
    },
    selectClient(val) {
      // 筛选this.channelList.parentLeve等于val的内容
      this.channelList = this.channelListFinal.filter(item => item.parentLevel === val)
    },
    selectChannel(val) {
      // 筛选this.branchList.parentLeve等于val的内容
      this.branchList = this.branchListFinal.filter(item => item.parentLevel === val)
      this.continue = this.channelListFinal.filter(item => item.id === val)
      var parentLevel = this.continue[0].parentLevel
      this.clientList = this.clientListFinal.filter(item => item.id === parentLevel)
    },
    selectBranch(val) {
      // 筛选this.branchList.parentLeve等于val的内容
      this.continue = this.branchListFinal.filter(item => Number(item.id) === Number(val))
      // 获取continue中的parentLevel元素
      var parentLevel = this.continue[0].parentLevel
      this.channelList = this.channelListFinal.filter(item => item.id === parentLevel)
      this.relationList = this.relationListFinal.filter(item => Number(item.sublevelId) === Number(val))
    },
    selectRelation(val) {
      this.continue = this.relationListFinal.filter(item => item.relation === val && (Number(item.sublevelId) === Number(this.reportCommonObj.clientBranch) || Number(item.clientId) === Number(this.reportCommonObj.clientChannel)))
      this.reportCommonObj.clientUserPhone = this.continue[0].phone
    },
    resetClient() {
      this.clientList = this.clientListFinal
    },
    resetChannel() {
      this.channelList = this.channelListFinal
    },
    resetBranch() {
      this.branchList = this.branchListFinal
    }
  }
}
</script>

<style scoped>

</style>
